<template>
  <div class="Vdetails">
    <div class="content" style="margin-top: 15px; text-align: left"
    v-for="(item,index) in appointmentInfo"
          :item="item"
          :index="index"
    >
      <div class="content-left" style="height: 100%; width: 30%; float: left">
        <!-- 患者信息 -->
        <div
          class="content-left-top"
          style="height: 40%; background-color: #fff"
          
        >
          <div class="img-1" style="padding-top: 3%; padding-left: 33%">
            <img src="" class="bells" />
            <p style="padding-left: 6%">{{item.name}}</p>
          </div>
          <table
            border="0"
            cellspacing="0"
            cellpadding="0"
            style="width: 100%; margin-top: 6%"
          >
            　
            <tr style="height: 50px">
              　
              <td>性别: <span>{{item.sex}}</span></td>
              　
              <td style="border-left: 2px solid #f6f6f6">
                年龄: <span>{{item.age}}</span>
              </td>
              　
            </tr>
            　
            <tr style="height: 50px">
              　
              <td colspan="2">电话:<span>{{item.phoneNumber}}</span></td>
              　
            </tr>
          </table>
        </div>
        <!-- 最新测量信息 -->
        <div
          class="content-left-bottom"
          style="height: 55%; background-color: #fff; margin-top: 5%"
        >
          <table
            border="0"
            cellspacing="0"
            cellpadding="0"
            style="width: 100%; margin-top: 6%; text-align: left"
          >
            <tr style="height: 50px">
              　
              <td>
                最新测量信息:
                <span
                  style="margin-left: 45%"
                  @click="dialogFormVisible_1 = true"
                  ><el-button type="text"
                    ><i class="el-icon-document"></i> 编辑</el-button
                  >
                </span>
              </td>
              <el-dialog title="诊前测量" :visible.sync="dialogFormVisible_1">
                <el-form :model="formCondition" label-width="80px" >
                  <el-form-item label="患者:" class="la-span">
                    <span >{{ item.name}} </span>
                    <span >{{ item.date }} </span>
                    <span >{{ item.time }} </span>
                    <span >预约{{item.doctor.name }} </span>
                  </el-form-item>

                  <el-form-item label="身高:" prop="stature">
                    <el-input v-model="item.condition.stature"/>
                  </el-form-item>
                  <el-form-item label="体重:" prop="weight">
                    <el-input v-model="item.condition.weight"/>
                  </el-form-item>
                  <el-form-item label="体温:" prop="temperature">
                    <el-input v-model="item.condition.temperature"/>
                  </el-form-item>
                  <el-form-item label="血压:" prop="DBP">
                    <el-input v-model="item.condition.DBP"/>
                  </el-form-item>
                  <el-form-item label="心率:" prop="SBP">
                    <el-input v-model="item.condition.SBP"/>
                  </el-form-item>
                </el-form>
                <div
                  slot="footer"
                  class="dialog-footer"
                  style="text-align: center"
                >
                  <el-button @click="dialogFormVisible_1 = false"
                    >取 消</el-button
                  >
                  <el-button type="success" @click="submit">提交</el-button>
                </div>
              </el-dialog>
              　
            </tr>

            　
            <tr style="height: 50px" >
              　
              <td>
                身高:
                <span >{{item.condition.stature }}</span>
              </td>
              　
            </tr>

            <tr style="height: 50px">
              　
              <td>
                体重:
                <span >{{ item.condition.weight }}</span>
              </td>
              　
            </tr>

            <tr style="height: 50px">
              　
              <td>
                体温:
                <span >{{ item.condition.temperature }}</span>
              </td>
              　
            </tr>

            <tr style="height: 50px">
              　
              <td>
                血压:
                <span >{{ item.condition.DBP}}</span>
              </td>
              　
            </tr>

            <tr style="height: 50px">
              　
              <td>
                心率: <span >{{ item.condition.SBP }}</span>
              </td>
              　
            </tr>
          </table>
        </div>
      </div>
      <div
        class="content-right"
        style="height: 100%; width: 60%; margin-left: 30px; float: left"
      >
        <!-- 预约信息 -->
        <div
          class="content-right-top"
          style="height: 43%; background-color: #fff"
        >
          <table
            border="0"
            cellspacing="0"
            cellpadding="0"
            style="width: 100%; text-align: left"
          >
            <tr style="height: 50px">
              　
              <td style="font-weight: bold">预约信息</td>
              　
            </tr>

            　
            <tr style="height: 50px">
              　
              <td>
                订单日期:
                <span >
                  {{item.date }}
                </span>
              </td>
              　
            </tr>

            <tr style="height: 50px">
              　
              <td>
                订单生成时间: <span>{{ item.indentTime }}</span>
              </td>
              　
            </tr>

            <tr style="height: 50px">
              　
              <td>
                预约类型:
                <span>{{ item.appointmentType}}</span>
              </td>
              　
            </tr>
          </table>
        </div>

        <!-- 问诊信息 -->
        <div
          class="content-right-bottom"
          style="height: 37%; background-color: #fff; margin-top: 3%"
        >
          <table
            border="0"
            cellspacing="0"
            cellpadding="0"
            style="width: 100%; text-align: left"
          >
            <tr style="height: 50px" >
              　
              <td style="font-weight: bold">问诊信息</td>
              　
            </tr>

            　
            <tr style="height: 50px">
              　
              <td>
                就诊时间:
                <span >{{ item.appointmentTime }}</span>
              </td>
              　
            </tr>

            <tr style="height: 50px">
              　
              <td>
                就诊医生: <span>{{ item.doctor.name }}</span>
              </td>
              　
            </tr>

            <tr style="height: 50px">
              　
              <td>
                主治:
                <span >{{ item.doctor.project }}</span>
              </td>
              　
            </tr>
          </table>
        </div>
        <div class="content-right-bottom2" style="margin-top: 3%">
          <span class="wrapper">
            <!-- 修改就诊时间按钮 -->
            <!-- <el-button type="success" @click="editorDialogForm"
              >修改就诊时间</el-button
            > -->
            <!-- 修改就诊时间界面 -->
            <el-dialog title="修改预约时间" :visible.sync="dialogFormVisible">
              <el-form :model="formTime">
                <el-form-item label="患者:" class="la-span">
                  <span >{{ item.name }} </span>
                  <span >
                    {{ item.appointmentTime }}
                  </span>
                  <span >预约{{ item.doctor.name }} </span>
                </el-form-item>
                <el-form-item label="修改预约时间：">
                  <el-date-picker
                    v-model="item.timeDate"
                    type="date"
                    placeholder="选择日期"
                     prop="timeDate"
                  >
                  </el-date-picker>

                  <el-time-select
                    v-model="item.timeTime"
                    placeholder="选择时间"
                     prop="timeTime"
                  >
                  </el-time-select>
                </el-form-item>
              </el-form>
              <div
                slot="footer"
                class="dialog-footer"
                style="text-align: center"
              >
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="success" @click="submit1()">提交</el-button>
              </div>
            </el-dialog>
            <!-- 取消预约按钮 -->
            <button @click="cancleReservation(index)">取消预约</button>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapMutations, mapState} from 'vuex'
export default {
  name: "Detail",
  data: function () {
    return {
     formCondition:{},
     formTime:{},
     index:'',
     dialogFormVisible_1:false,
     dialogFormVisible: false,
     edit_dialogFormVisible:false,

      
        // formLabelWidth: '200px',
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        day:'',
        value1:''
    }
},
mounted() {
  let {index} = this.$route.params
  this.index = index
  console.log(index);
  // console.log(this.$route.params);
},
methods: {

  ...mapMutations({
    receiveCondition:'receiveCondition',
    deleteReservation:'deleteReservation'
  }),

   submit(){
      this.receiveCondition(this.formCondition)
      this.dialogFormVisible_1= false
   },
  cancleReservation(index){
    this.$router.push('/home/reservation/today')
    this.deleteReservation(index)
  },

  editorDialogForm:function(){
        this.dialogFormVisible = true;
        this.form2={
          timeDate:'',
          timeTime:''
        };
      },
      

      handleIconClick:function(ev) {
      console.log(ev);
      },
    

},
 computed: {
   ...mapState({
     appointmentInfo:state=>state.appointment.appointmentInfo,
   })
 },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #f6f6f6;
}
.Vdetails .img-1 {
  /* max-width: 200px;
    max-height: 200px;*/
  border-radius: 50%;
}
.Vdetails td {
  border-top: 2px solid #f6f6f6;
}
.Vdetails .content-left-top td {
  padding-left: 3%;
}
.Vdetails .content-left-bottom td {
  padding-left: 3%;
}
.Vdetails .content-right-top td {
  padding-left: 3%;
}
.Vdetails .content-right-bottom td {
  padding-left: 3%;
}
.Vdetails .la-span span {
  margin-left: 3%;
}
</style>
